<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VIDEO</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/video.css">
  <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">

</head>

<body>
  <!-- 头部 -->
  <header>
    <section id="header">
      <div class="logo">
        <img src="./images/logo_02.png" alt="">
      </div>
      <div class="nav-items">
        <li class="nav-item">
          <a href="index.html">首页</a>
          <a href="index.html" class="hover-show">HOME</a>
        </li>
        <li class="nav-item">
          <a href="brand.html">走进尚典</a>
          <a href="brand.html" class="hover-show">BRAND</a>
        </li>
        <li class="nav-item">
          <a href="news.html">新闻动态</a>
          <a href="news.html" class="hover-show">NEWS</a>
        </li>
        <li class="nav-item">
          <a href="video.html">尚典视频</a>
          <a href="video.html" class="hover-show">VIDEO</a>
        </li>
        <li class="nav-item">
          <a href="product.html">产品中心</a>
          <a href="product.html" class="hover-show">PRODUCT</a>
        </li>
        <li class="nav-item">
          <a href="search.html">授权查询</a>
          <a href="search.html" class="hover-show">SEARCH</a>
        </li>
        <li class="nav-item">
          <a href="contact.html">联系我们</a>
          <a href="contact.html" class="hover-show">CONTACT</a>
        </li>
      </div>
    </section>
  </header>

  <!-- 轮播图 -->
  <section id="banner2" class="autorow">
    <img src="./images/banner02_02.png" class="autorow" alt="">
  </section>

  <!-- 联系我们 -->
  <main id="video-main" class="row automargin flex flex-d">
    <div id="video-main-content" class="automargin">
      <section id="news-content" class="flex autorow flex-d ">
        <div class="news-content-header autorow all-flex">
          <div class="header-left all-flex">
            <i class="fa fa-home home-icon common-ray" aria-hidden="true"></i>
            <p class="fs18 common-ray fw">视频中心</p>
          </div>

          <div class="header-right">
            <p class="fs12 common-ray">当前位置：首页 >视频中心</p>
          </div>

          <div class="header-line autorow"></div>
        </div>
      </section>

      <ul class="video-items autorow flex">
        <li class="video-item">
          <img src="./images/video1.jpg" alt="">
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
        <li class="video-item">
          <img src="./images/video2.jpg" alt="">
          <div class="video-item-text all-flex flex-d jf-center autorow">
            <h4 class="fs14">为了保持美丽离不开洗发水的使用</h4>
            <p class="fs12 common-gray">2016/07/22</p>
          </div>
        </li>
      </ul>

      <div class="page all-flex jf-center">
        <nav id="page-navigation">
          <ul class="pagination-items">
            <li class="pagination-item">
              <a href="#" aria-label="Previous">
                <i class="fa fa-angle-left common-gray"></i>
              </a>
            </li>
            <li class="pagination-item"><a href="#">1</a></li>
            <li class="pagination-item"><a href="#">2</a></li>
            <li class="pagination-item"><a href="#">3</a></li>
            <li class="pagination-item"><a href="#">...</a></li>
            <li class="pagination-item"><a href="#">8</a></li>
            <li class="pagination-item">
              <a href="#" aria-label="Next">
                <i class="fa fa-angle-right"></i>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </main>

  <!-- footer -->
  <footer>
    <section id="footer">
      <img src="./images/footer-logo_03.png" alt="" class="footer-logo">
      <div class="footer-line"></div>
      <div class="navigation">
        <h4>导航 NAVIGATION</h4>
        <ul class="navigation-items">
          <li class="navigation-item">网站首页</li>
          <li class="navigation-item">走进尚典</li>
          <li class="navigation-item">新闻动态</li>
          <li class="navigation-item">尚典视频</li>
          <li class="navigation-item">产品中心</li>
          <li class="navigation-item">授权查询</li>
          <li class="navigation-item">联系我们</li>
        </ul>
      </div>
      <div class="footer-line"></div>
      <div class="contact">
        <h4>联系 CONTACT</h4>
        <ul class="contact-items">
          <li class="contact-item">
            地址：广州市海珠区赤岗街道新市头路锦安苑锦豪居C栋502
          </li>
          <li class="contact-item">
            联系电话：400-1886-1345
          </li>
          <li class="contact-item">
            邮箱：203841290@qq.com
          </li>
          <li class="contact-item">
            香港闻名生物有限公司版权所有 粤ICP备0754673
          </li>
        </ul>
      </div>
      <div class="footer-line"></div>
      <img src="./images/2wei_03.png" alt="">
    </section>
  </footer>
</body>

</html>